<template>
  <div class="page fxActivitySigning-details">
    <div class="scroll-view">
      <customHeader :middleTitle="data.msgStatus===0?'返现营销活动开通确认':'待办事项'"></customHeader>
      <fxActivityProtocol ref="fxActivityProtocol"></fxActivityProtocol>
      <div class="page-body">
        <div class="top">
          <div class="shop-name">{{data.msgContent?JSON.parse(data.msgContent).shopName:""}}</div>
          <div class="status" :class="{'blue':data.msgStatus===0}" v-if="data.msgStatus||data.msgStatus===0">{{statusFormate(data.msgStatus)}}</div>
          <ul class="top-ul">
            <li>
              <span>门店活动ID</span>
              <div>{{data.marketActivityModel?data.marketActivityModel.marketingId:""}}</div>
            </li>
            <li>
              <span>发起时间</span>
              <div>{{data.createTime?CommonUtil.timestampToTime(data.createTime):''}}</div>
            </li>
            <li v-if="data.msgStatus==4">
              <span>失效时间</span>
              <div>{{data.updateTime?CommonUtil.timestampToTime(data.updateTime):''}}</div>
            </li>
            <template v-if="data.msgStatus==1||data.msgStatus==2">
              <li>
                <span>处理时间</span>
                <div>{{data.updateTime?CommonUtil.timestampToTime(data.updateTime):''}}</div>
              </li>
              <li>
                <span>处理结果</span>
                <div v-if="data.msgStatus==1">同意</div>
                <div v-if="data.msgStatus==2">驳回</div>
              </li>
              <li>
                <span>处理人</span>
                <div>{{data.operator}}</div>
              </li>
            </template>
            <li v-if="data.msgStatus==2">
              <span>驳回原因</span>
              <div>
                <ul class="content-ul" v-if="data.rejectReasonList&&data.rejectReasonList.length>0">
                  <li v-for="(r,index) in data.rejectReasonList" :key="index">•{{r}}</li>
                </ul>
              </div>
            </li>
            <li v-if="data.msgStatus==3||data.msgStatus==4">
              <span>失效原因</span>
              <div>
                <ul class="content-ul" v-if="data.rejectReasonList&&data.rejectReasonList.length>0">
                  <li v-for="(r,index) in data.rejectReasonList" :key="index">•{{r}}</li>
                </ul>
              </div>
            </li>
            <li v-if="data.msgStatus===1">
              <span>已签署协议</span>
              <div class="protocol-text">
                <span @click="openProtocol">《营销服务协议》</span>
                <span v-if="data['aliSignUrl']" @click="linkToProtocol(data['aliSignUrl'])">《{{data['aliSignUrl']&&data['wxSignUrl']?'商户分账协议1':'商户分账协议'}}》</span>
                <span v-if="data['wxSignUrl']" @click="linkToProtocol(data['wxSignUrl'])">《{{data['aliSignUrl']&&data['wxSignUrl']?'商户分账协议2':'商户分账协议'}}》</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="link-section" @click="linkToIntro">
          <span>返现营销介绍</span>
          <div>
            <i class="zhk-list_rarrow"></i>
          </div>
        </div>
        <div class="section-title">活动基本信息</div>
        <ul class="bottom">
          <li>
            <span>开始时间</span>
            <div>{{data.marketActivityModel.participateMarketingStartTime?CommonUtil.timestampToTime(data.marketActivityModel.participateMarketingStartTime):""}}</div>
          </li>
          <li>
            <span>结束时间</span>
            <div>{{data.marketActivityModel.participateMarketingEndTime?CommonUtil.timestampToTime(data.marketActivityModel.participateMarketingEndTime):""}}</div>
          </li>
          
          <li>
            <span>
              营销服务费比例
              <span class="sub-text">仅当拉新或复购时收取（即用户使用津贴支付时才会收取）</span>
            </span>
            <div>
              {{toPercent(data.marketActivityModel.marketingFeeRatio)}}
              <div v-if="data.marketActivityModel.yzshopMarketingUpperboundExtModel['marketingFeeUpperboundValue']">封顶{{data.marketActivityModel.yzshopMarketingUpperboundExtModel.marketingFeeUpperboundValue}}元</div>
            </div>
          </li>
          <li>
            <span>软件服务费比例</span>
            <div>
              {{toPercent(data.marketActivityModel.softwareFeeRatio)}}
              <div v-if="data.marketActivityModel.yzshopMarketingUpperboundExtModel['softwareFeeUpperboundValue']">封顶{{data.marketActivityModel.yzshopMarketingUpperboundExtModel.softwareFeeUpperboundValue}}元</div>
            </div>
          </li>
        </ul>
        <ul class="bottom mt20">
          <li>
            <span>返现方式</span>
            <div>{{CommonUtil.marketTypeFormate(data.marketActivityModel.marketType)}}</div>
          </li>
          <li>
            <span>用户津贴比例</span>
            <div>
              {{data.marketActivityModel.marketType==4?`新会员返${toPercent(data.marketActivityModel.platformsServiceFeeRatio)},老会员返${toPercent(data.marketActivityModel.secondPlatformsServiceFeeRatio)}`:toPercent(data.marketActivityModel.platformsServiceFeeRatio)}}
              <div v-if="data.marketActivityModel.yzshopMarketingUpperboundExtModel['platformsServiceFeeUpperboundValue']">封顶{{data.marketActivityModel.yzshopMarketingUpperboundExtModel.platformsServiceFeeUpperboundValue}}元</div>
            </div>
          </li>
        </ul>
        <ul class="bottom mt20" v-if="data.marketActivityModel.fragmentFeeUsed">
            <li>
              <span>特殊时段</span>
            </li>
            <li style="margin-top: -1.5rem;">
            <div>
              <ul v-for="(item,index) in data.marketActivityModel.yzShopMarketingFragmentFeeExtModels" :key="index"  :class="{'mt20':index>0}">
                  <li>{{CommonUtil.weekFormate(item.weekSet)}}</li>
                  <li>{{CommonUtil.timeForamte(item.timeFragmeentList)}}</li>
                  <template  v-if="item.fragmentJoinMarkting==1">
                    <li>用户津贴比例：{{item.platformsServiceFeeRuleType==4?`新会员返${toPercent(item.platformsServiceFeeRatio.newMemberFeeRatio)},老会员返${toPercent(item.platformsServiceFeeRatio.oldMemberFeeRatio)}`:toPercent(item.platformsServiceFeeRatio.commonMemberFeeRatio)}}</li>
                    <li>营销服务费比例：{{toPercent(item.marketingFeeRatio.commonMemberFeeRatio)}}</li>
                  </template>
                  <template v-else>
                    <li>该时段不返不核</li>
                  </template>
              </ul>
            </div>
          </li>
        </ul>
        <div class="tip-msg">*以上所有费用均按收银实收比例计算</div>
      </div>
      <div class="protocol-check-wrap" v-if="data.msgStatus===0&&this.data.needOpenMarketing===0"  >
         <i :class="protocolChecked?'zhk-ty':'zhk-wxz'"  @click.stop="protocolChecked = !protocolChecked"/>
        <div>我已阅读并同意</div> 
        <span @click="openProtocol">《营销服务协议》</span>
        <span v-if="data['aliSignUrl']" @click="linkToProtocol(data['aliSignUrl'])">《{{data['aliSignUrl']&&data['wxSignUrl']?'商户分账协议1':'商户分账协议'}}》</span>
        <span v-if="data['wxSignUrl']" @click="linkToProtocol(data['wxSignUrl'])">《{{data['aliSignUrl']&&data['wxSignUrl']?'商户分账协议2':'商户分账协议'}}》</span>
      </div>
      <div class="btn-wrap" v-if="data.msgStatus===0">
        <div @click="reject">驳回</div>
        <div @click="agree">同意</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import jsBridge from "../../tools/jsBridge.js";
import fxActivityProtocol from "../fxActivitySigning/fxActivityProtocol";
import { Toast } from "mint-ui";
import config from "../../base/profile/config.json";
export default {
  name: "fxActivityDetails",
  data() {
    return {
      CommonUtil: CommonUtil,
      protocolChecked:false,
      data: {
        marketActivityModel: {
          marketingFeeRatio: "",
          marketingId: "",
          participateMarketingEndTime: null,
          participateMarketingStartTime: null,
          marketType:null,
          platformsServiceFeeRatio: "",
          secondPlatformsServiceFeeRatio: "",//阶梯返现代表新会员
          status: "",
          fragmentFeeUsed:null,
          yzshopMarketingUpperboundExtModel:{},
          yzShopMarketingFragmentFeeExtModels:[],
        }
      },
    };
  },
  methods: {

    linkToIntro() {
      const url = config.fxyxActivityIntro+"?s=1";
      jsBridge.openWindow({
        needTitle: true,
        title:"返现营销介绍",
        url: url,
        target: "server",
      });
    },
    openProtocol(){
      this.$refs.fxActivityProtocol.popupShow();
    },
    linkToProtocol(url) {
      if (!url) {
        Toast("未取到协议地址");
      } else {
        jsBridge.openWindow({
          needTitle: true,
          title:"商户分账协议",
          url: url,
          target: "server",
        });
      }
    },
        //小数转百分比
    toPercent(rate) {
      if (rate) {
        return  parseFloat((rate * 100).toPrecision(12))+"%";
      } else {
        return rate;
      }
    },
    statusFormate(status) {
      let v = "";
      if (status == 0) {
        v = "待处理";
      } else if (status == 1 || status == 2) {
        v = "已完成";
      } else if (status == 3) {
        v = "已撤回";
      } else if (status == 4) {
        v = "已失效";
      }
      return v;
    },
    loadData() {
      let url = `/newapp/message/getMsgDetails.do?msgId=${this.$route.query.msgId}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success && res.resultObject) {
            res.resultObject.marketActivityModel.yzshopMarketingUpperboundExtModel=res.resultObject.marketActivityModel['yzshopMarketingUpperboundExtModel']||{};
            res.resultObject.marketActivityModel.yzShopMarketingFragmentFeeExtModels=res.resultObject.marketActivityModel['yzShopMarketingFragmentFeeExtModels']||{};
            //this.marketActivityModel = res.resultObject.marketActivityModel;
            this.data = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    reject() {
      let query = {
        msgId: this.data.msgId,
        msgTitleType: this.data.msgTitleType,
        openId: this.data.openId,
        shopId:this.data.shopId
      };
      this.$router.push({
        path: "/todoList/todoDetailOpenPay/rejectOpenPay",
        query: query
      });
    },
    agree() {
      if(this.data.needOpenMarketing===0&&!this.protocolChecked){
        Toast("请先阅读并同意协议内容");
        return;
      }
      const needOpenMarketing = this.data.needOpenMarketing;//是否需要开通（变更）分账 0 不需要开通分账 1 支付宝商户号开通分账 2.微信商户号开通分账 3.同一商户号开通分账 4.不同商户号开通分账

      if(needOpenMarketing===0)  {
        let param = {
          msgId: this.data.msgId,
          msgStatus: 1,
          msgTitleType: this.data.msgTitleType,
          openId: this.data.openId,
          shopId:this.data.shopId,
          needOpenMarketing:needOpenMarketing
        };
        this.ajax({
          url: "/newapp/message/updateMsgState.do",
          type: "post",
          data: param,
          controlLoading: true
        }).then(res => {
          if (res.success) {
            Toast({
              message: '处理完成',
              iconClass: 'icon icon-success'
            });
            this.$router.back();
          }else{
            Toast(res.msg);
          }
        })
          .catch(err => {

          });
      }else {
        let query = {
          msgId: this.data.msgId,
          msgTitleType: this.data.msgTitleType,
          openId: this.data.openId,
          shopId: this.data.shopId
        };
        this.$router.push({
          path: "/todoList/fxActivitySigningDetails/fxActivitySigning",
          query: this.data
        });
      } 
    },
  },

  created() { this.loadData(); },
  components: {
    customHeader,
    fxActivityProtocol
  },
};
</script>
<style lang='scss' scoped>
@import "NotificationCenter";
</style>
